<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/demo.css" type="text/css">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<style>
    .icon_div {
        display: inline-block;
        height: 25px;
        width: 35px;
    }
    
    .icon_div a {
        display: inline-block;
        width: 27px;
        height: 20px;
        cursor: pointer;
    }
    
    .ztree {
        padding: 0;
        border: 2px solid rgb(127, 133, 133);
        width: 500px;
    }
    
    .ztree li {
        border-top: 1px solid rgb(127, 133, 133);
        border-left: 1px solid rgb(127, 133, 133);
    }
    
    .ztree li a {
        vertical-align: middle;
        height: 30px;
    }
    
    .ztree li ul {
        padding-left: 0px
    }
    
    .ztree li>a,
    .ztree li a.curSelectedNode {
        padding-top: 0px;
        background: none;
        height: auto;
        border: none;
        cursor: default;
        opacity: 1;
    }
    
    .ztree div.diy span {
        line-height: 30px;
        vertical-align: middle;
    }
    
    .diy {
        display: inline-block;
        text-align: center;
        line-height: 30px;
        color: #6c6c6c;
        font-family: "SimSun";
        font-size: 12px;
        overflow: hidden;
        border-left: 1px solid rgb(127, 133, 133);
    }
    
    .diy-div {
        display: inline-block;
        position: fixed;
        left: 250px;
        border-left: 1px solid rgb(127, 133, 133);
        text-align: center;
        line-height: 30px;
        color: #6c6c6c;
        font-family: "SimSun";
        font-size: 12px;
        overflow: hidden;
    }
    
    .ztree div.diy:first-child {
        text-align: left;
        text-indent: 10px;
        border-left: none;
    }
</style>

<body>
    <div id="dataTree" class="ztree"></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>
<script>
    $(function() {

        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 15;
            var liObj = $("#" + treeNode.tId); //节点
            var aObj = $("#" + treeNode.tId + "_a"); //整体数据，包含+-图标，文件图标，内容
            var switchObj = $("#" + treeNode.tId + "_switch"); //图标 + -
            var icoObj = $("#" + treeNode.tId + "_ico"); //文件图标
            var spanObj = $("#" + treeNode.tId + "_span"); //显示文字
            var checkObj = $('#' + treeNode.tId + '_check'); //多选框图标
            aObj.attr('title', '');
            aObj.append('<div class="diy swich"></div>');
            var div = $(liObj).find('div').eq(0);
            switchObj.remove();
            spanObj.remove();
            icoObj.remove();
            checkObj.remove();
            div.append(switchObj);
            div.append(checkObj);
            div.append(spanObj);
            var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
            switchObj.before(spaceStr);
            var editStr = '';
            editStr += '<div class="diy-div">' +
                // (treeNode.CONTACT_USER == null ? '&nbsp;' : treeNode.CONTACT_USER) +
                '<input type="checkbox" name="aa" > aa <input type="checkbox" name="bb"> bb' +

                '</div>';
            aObj.append(editStr);
        }
        var setting = {
            check: {
                enable: true,
                chkboxType: {
                    "Y": "ps",
                    "N": "ps"
                }
            },
            view: {
                checkable: true,
                showLine: false,
                showIcon: false,
                addDiyDom: addDiyDom
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        var data = [{
            "CONTACT_USER": "张三",
            "CONTACT_PHONE": "18888888888",
            "addFlag": true,
            "ORG_ID": 1,
            "id": "o1",
            "pId": "onull",
            "open": true,
            "name": "单位1",
            "modFlag": true,
            "CORP_CAT": "港口-天然液化气,港口-液化石油气",
            "TYPE": "org",
            "delFlag": true
        }, {
            "CONTACT_USER": null,
            "SECTOR_NAME": "部门1",
            "addFlag": true,
            "CONTACT_PHONE": null,
            "SECTOR_ID": 1,
            "ORG_ID": 1,
            "id": "s1",
            "pId": "o1",
            "name": "部门1",
            "modFlag": true,
            "PARENT_ID": null,
            "CORP_CAT": "港口-天然液化气",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": null,
            "SECTOR_NAME": "部门12",
            "addFlag": true,
            "CONTACT_PHONE": "0",
            "SECTOR_ID": 2,
            "ORG_ID": 1,
            "id": "s2",
            "pId": "s1",
            "name": "部门12",
            "modFlag": true,
            "PARENT_ID": 1,
            "CORP_CAT": "港口-集装箱",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": null,
            "SECTOR_NAME": "部门13",
            "addFlag": true,
            "CONTACT_PHONE": "0",
            "SECTOR_ID": 3,
            "ORG_ID": 1,
            "id": "s3",
            "pId": "s1",
            "name": "部门13",
            "modFlag": true,
            "PARENT_ID": 1,
            "CORP_CAT": "港口-集装箱",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": null,
            "SECTOR_NAME": "部门24",
            "addFlag": true,
            "CONTACT_PHONE": "0",
            "SECTOR_ID": 4,
            "ORG_ID": 1,
            "id": "s4",
            "pId": "s2",
            "name": "部门24",
            "modFlag": true,
            "PARENT_ID": 2,
            "CORP_CAT": "港口-集装箱",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": null,
            "SECTOR_NAME": "部门35",
            "addFlag": true,
            "CONTACT_PHONE": "0",
            "SECTOR_ID": 5,
            "ORG_ID": 1,
            "id": "s5",
            "pId": "s3",
            "name": "部门35",
            "modFlag": true,
            "PARENT_ID": 3,
            "CORP_CAT": "港口-集装箱",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": null,
            "SECTOR_NAME": "部门22",
            "addFlag": true,
            "CONTACT_PHONE": "0",
            "SECTOR_ID": 8,
            "ORG_ID": 1,
            "id": "s8",
            "pId": "s2",
            "name": "部门22",
            "modFlag": true,
            "PARENT_ID": 2,
            "CORP_CAT": "-",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": null,
            "SECTOR_NAME": "部门23",
            "addFlag": true,
            "CONTACT_PHONE": "0",
            "SECTOR_ID": 9,
            "ORG_ID": 1,
            "id": "s9",
            "pId": "s2",
            "name": "部门23",
            "modFlag": true,
            "PARENT_ID": 2,
            "CORP_CAT": "-",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": "打撒",
            "SECTOR_NAME": "不爱的是分散",
            "addFlag": true,
            "CONTACT_PHONE": "1231231",
            "SECTOR_ID": 21,
            "ORG_ID": 1,
            "id": "s21",
            "pId": "o1",
            "name": "不爱的是分散",
            "modFlag": true,
            "PARENT_ID": null,
            "CORP_CAT": "港口-天然液化气",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": "111",
            "SECTOR_NAME": "test",
            "addFlag": true,
            "CONTACT_PHONE": "222",
            "SECTOR_ID": 29,
            "ORG_ID": 1,
            "id": "s29",
            "pId": "s2",
            "name": "test",
            "modFlag": true,
            "PARENT_ID": 2,
            "CORP_CAT": "港口-集装箱",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": null,
            "SECTOR_NAME": "22",
            "addFlag": true,
            "CONTACT_PHONE": null,
            "SECTOR_ID": 38,
            "ORG_ID": 1,
            "id": "s38",
            "pId": "o1",
            "name": "22",
            "modFlag": true,
            "PARENT_ID": null,
            "CORP_CAT": "-",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": null,
            "SECTOR_NAME": "部门9",
            "addFlag": true,
            "CONTACT_PHONE": null,
            "SECTOR_ID": 61,
            "ORG_ID": 1,
            "id": "s61",
            "pId": "o1",
            "name": "部门9",
            "modFlag": true,
            "PARENT_ID": null,
            "CORP_CAT": "港口-天然液化气",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": "sara",
            "SECTOR_NAME": "流星雨",
            "addFlag": true,
            "CONTACT_PHONE": "11111111111",
            "SECTOR_ID": 141,
            "ORG_ID": 1,
            "id": "s141",
            "pId": "s1",
            "name": "流星雨",
            "modFlag": true,
            "PARENT_ID": 1,
            "CORP_CAT": "-",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": "流星",
            "SECTOR_NAME": "1级部门",
            "addFlag": true,
            "CONTACT_PHONE": "11111111111",
            "SECTOR_ID": 142,
            "ORG_ID": 1,
            "id": "s142",
            "pId": "o1",
            "name": "1级部门",
            "modFlag": true,
            "PARENT_ID": null,
            "CORP_CAT": "港口-天然液化气",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": "11",
            "SECTOR_NAME": "11",
            "addFlag": true,
            "CONTACT_PHONE": "11111111111",
            "SECTOR_ID": 145,
            "ORG_ID": 1,
            "id": "s145",
            "pId": "s1",
            "name": "11",
            "modFlag": true,
            "PARENT_ID": 1,
            "CORP_CAT": "港口-集装箱",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": "ff",
            "SECTOR_NAME": "fff",
            "addFlag": true,
            "CONTACT_PHONE": "11",
            "SECTOR_ID": 146,
            "ORG_ID": 1,
            "id": "s146",
            "pId": "s1",
            "name": "fff",
            "modFlag": true,
            "PARENT_ID": 1,
            "CORP_CAT": "港口-油码头",
            "TYPE": "sector",
            "delFlag": true
        }, {
            "CONTACT_USER": "1",
            "SECTOR_NAME": "1",
            "addFlag": true,
            "CONTACT_PHONE": "1",
            "SECTOR_ID": 161,
            "ORG_ID": 1,
            "id": "s161",
            "pId": "o1",
            "name": "1",
            "modFlag": true,
            "PARENT_ID": null,
            "CORP_CAT": "港口-天然液化气",
            "TYPE": "sector",
            "delFlag": true
        }];
        //初始化列表
        zTreeNodes = data;
        //初始化树
        $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
    });
</script>

</html>